<template>
  <search-table :data="templates" :columns="columnsOptions" :searchKeys="searchKeys">
    <el-button class="createButton" @click="add">新增</el-button>
    <el-dialog :close-on-click-modal="false" width="500px" :visible.sync="visible" title="编辑流程图">
      <el-form ref="form" :model="templatesDetail" class="template_form">
        <el-col :span="22">
          <el-form-item :rules="{
              required: true,
              message: '请输入流程图名称！',
              trigger: 'blur'
            }" label="流程图名称" label-width="100px" prop="name">
            <el-input v-model="templatesDetail.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="流程图说明" label-width="100px">
            <el-input type="textarea" rows="4" v-model="templatesDetail.remarks" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog_foote">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="okHandler">确 定</el-button>
      </div>
    </el-dialog>
  </search-table>
</template>

<script>
import SearchTable from '../../components/SearchTable.vue'
export default {
  name: 'FlowChart',
  data () {
    return {
      templates: [],
      columnsOptions: [
        {
          title: '流程图名称',
          key: 'name',
          width: 200
        },
        {
          title: '流程图说明',
          key: 'remarks',
          width: 0
        },
        {
          title: '操作',
          key: '',
          type: 'button',
          width: 300,
          buttons: [
            {
              text: '编辑',
              click: this.editClick
            },
            {
              text: '流程设计',
              click: this.toFlow
            }
          ]
        }
      ],
      visible: false,
      isAdd: false,
      templatesDetail: {},
      searchKeys: ['name']
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList: function () {
      this.$requestx
        .get('/api/FlowChart/Gets')
        .then(res => {
          this.templates = res
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    add: function () {
      this.visible = true
      this.templatesDetail = {}
      this.isAdd = true
    },
    okHandler: function () {
      this.$refs.form.validate(result => {
        debugger
        if (result) {
          let requestResult
          if (this.isAdd) {
            requestResult = this.okAdd
          } else {
            requestResult = this.okEdit
          }
          requestResult()
            .then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getList()
              this.visible = false
            })
            .catch(err => {
              this.$message.error(err)
              this.visible = false
            })
        }
      })
    },
    okAdd () {
      return this.$requestx.post('/api/FlowChart/Add', this.templatesDetail)
    },
    okEdit () {
      return this.$requestx.put(
        '/api/FlowChart/Update?id=' + this.templatesDetail.id,
        this.templatesDetail
      )
    },
    editClick: function (row, index) {
      this.templatesDetail = { ...row }
      this.isAdd = false
      this.visible = true
    },
    toFlow: function (row) {
      debugger
      this.$router.push({ path: `/flow_charts/design/${row.id}` })
    },
    cancel: function () {
      this.visible = false
      this.$refs.form.resetFields()
    }
  },
  components: {
    'search-table': SearchTable
  }
}
</script>
<style scoped>
.createButton {
  float: left;
}
</style>
